import React, { useState, useRef, useEffect } from "react";
import styles from "./index.module.less";
import "./index.less";
import Operate from "./operate";
import defaultHead from "@images/sex0.webp";
import { request } from "@apis/request";
import { Scrollbars } from "react-custom-scrollbars-2";
import moment from "moment";

let oper;

const FlappyBird = () => {
    const bg = useRef(null);
    const bird = useRef(null);
    const ul = useRef(null);
    const score = useRef(null);
    const result = useRef(null);
    const best = useRef(null);
    const img = useRef(null);
    const begin = useRef(null);
    const play = useRef(null);
    const end = useRef(null);
    const [isShowRank, setShowRank] = useState(false);
    const [list, setList] = useState([]);

    const getRank = async () => {
        const res = await request("/gamesRank");
        if (res.code === "0000") {
            setList(res.data);
        }
    };

    useEffect(() => {
        oper = new Operate({
            bg: bg.current,
            bird: bird.current,
            ul: ul.current,
            score: score.current,
            result: result.current,
            best: best.current,
            img: img.current,
            begin: begin.current,
            play: play.current,
            end: end.current,
        });
    }, []);

    useEffect(() => {
        // 敲击空格键，控制飞行
        document.onkeyup = function (e) {
            // console.log(e.code);
            if (e.code === "Space") {
                oper.birdMove(true);
            }
        };
    }, []);

    return (
        <div className={styles.flappy_bird}>
            <div
                className={styles.rank_btn}
                onClick={() => {
                    setShowRank(!isShowRank);
                    isShowRank || getRank();
                }}
            ></div>
            <div
                className={styles.rank_wrap}
                style={{ display: isShowRank ? "flex" : "none" }}
            >
                <div className={styles.rank_main}>
                    <Scrollbars autoHide>
                        <ul className={styles.rank_ul}>
                            {list &&
                                list.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            <p className={styles.sort}>
                                                {index + 1}
                                            </p>
                                            <div className={styles.user_msg}>
                                                <img
                                                    src={require(`@images/head/${item.avatarUrl}`)}
                                                    alt=""
                                                />
                                                <p className={styles.user_name}>
                                                    {item.userName}
                                                </p>
                                            </div>
                                            <p className={styles.best_score}>
                                                {item.flappyBird.best}
                                            </p>
                                            <p className={styles.date}>
                                                {moment(
                                                    item.flappyBird.time
                                                ).format("YYYY-MM-DD HH:mm:ss")}
                                            </p>
                                        </li>
                                    );
                                })}
                        </ul>
                    </Scrollbars>
                </div>
            </div>
            <div className={styles.bird_main} ref={bg}>
                {/* 开始页面 */}
                <div
                    className={styles.begin_page}
                    style={{ display: "block" }}
                    ref={begin}
                >
                    <div className={styles.begin_title}>
                        <div className={styles.begin_text}></div>
                        <div className={styles.begin_icon}></div>
                    </div>
                    <div
                        className={styles.begin_btn}
                        onClick={() => {
                            oper.start();
                        }}
                    ></div>
                </div>
                {/* 游戏内容 */}
                <div
                    className={styles.play_page}
                    style={{ display: "none" }}
                    ref={play}
                >
                    <div className={styles.score} ref={score}>
                        0分
                    </div>
                    <div className={styles.bird_wrap} ref={bird}>
                        <div
                            className={`${styles.bird} ${styles.common}`}
                        ></div>
                    </div>
                    <ul className={styles.pipe_ul} ref={ul}>
                        {/* <li className={styles.top_pipe}>
            <div className={styles.pipe_head}></div>
          </li>
          <li className={styles.bottom_pipe}>
            <div className={styles.pipe_head}></div>
          </li> */}
                    </ul>
                </div>
                {/* 结束页面 */}
                <div
                    className={styles.end_page}
                    style={{ display: "none" }}
                    ref={end}
                >
                    <div className={styles.game_over}></div>
                    <div className={styles.score_board}>
                        <div className={styles.img}>
                            <img src={defaultHead} alt="" ref={img} />
                        </div>
                        <p className={styles.result} ref={result}>
                            0
                        </p>
                        <p className={styles.best} ref={best}>
                            ?
                        </p>
                    </div>
                    <div
                        className={styles.ok_btn}
                        onClick={() => {
                            oper.init();
                        }}
                    ></div>
                </div>
            </div>
        </div>
    );
};

export default FlappyBird;
